import React, { FC } from 'react';
import { Text } from '@ray-js/ray';
import { useSelector } from 'react-redux';
import { DpStateKey, selectDpStateByCode } from '@/redux/modules/dpStateSlice';
import Strings from '@/i18n';

import styles from './index.module.less';
import TouchableOpacity from '../TouchableOpacity';
import IconFont from '../IconFont';

type Props = {
  dpCode: DpStateKey;
};

const Enum: FC<Props> = ({ dpCode }) => {
  const dpValue = useSelector(selectDpStateByCode(dpCode)) as string;

  const handleFeature = () => {
    // TODO
  };

  return (
    <TouchableOpacity className={styles.feature} onClick={handleFeature}>
      <Text className={styles.featureText}>{Strings.getDpLang(dpCode, dpValue)}</Text>
      <IconFont icon="angleRight" />
    </TouchableOpacity>
  );
};

export default Enum;
